<template>
  <div class="wd">
    <div class="top">
      <div class="one">
        <img
          src="https://m.cdfgsanya.com/wap/resources/images/default-pic.705e150f.png"
          alt=""
        />
        <router-link to="/denglu"><span>点击登录</span></router-link>
      </div>
      <div class="two">
        <div>
          <h4>0</h4>
          <p>商品收藏</p>
        </div>
        <div>
          <h4>0</h4>
          <p>浏览记录</p>
        </div>
        <div>
          <h4>0</h4>
          <p>优惠劵</p>
        </div>
      </div>
    </div>
    <div class="xs">
      <div class="left">线上订单</div>
      <div class="right">门店订单</div>
    </div>
    <div class="five">
      <div v-for="(v, index) in arr" :key="index">
        <img :src="v.url" alt="" />
        <p>{{ v.Txr }}</p>
      </div>
    </div>
    <div class="ten">
      <div v-for="(v, index) in obj" :key="index">
        <img :src="v.src" alt="" />
        <p>{{ v.txt }}</p>
      </div>
    </div>
    <h2>助力海南自贸港建设</h2>
    <van-tabbar active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item icon="home-o" replace to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="goods-collect-o" replace to="/classify"
        >分类</van-tabbar-item
      >
      <van-tabbar-item icon="sign" replace to="/shopcar"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="contact" replace to="/mine"
        >我的中免</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);

import { Icon } from "vant";
import { Toast } from "vant";

Vue.use(Icon);
export default {
  data() {
    return {
      arr: [
        {
          url: "https://m.cdfgsanya.com/wap/resources/images/icons/wallet-outline.78fa0077.png",
          Txr: "代付款",
        },
        {
          url: "https://m.cdfgsanya.com/wap/resources/images/icons/send-outline.f7924e35.png",
          Txr: "代发货",
        },
        {
          url: "https://m.cdfgsanya.com/wap/resources/images/icons/delivery-outline.407debf1.png",
          Txr: "代提货",
        },
        {
          url: "https://m.cdfgsanya.com/wap/resources/images/icons/end-outline.c48cd761.png",
          Txr: "退款/售后",
        },

        {
          url: "https://m.cdfgsanya.com/wap/resources/images/icons/delivery-outline.407debf1.png",
          Txr: "全部订单",
        },
      ],
      obj: [
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/vip-card.a307361b.png",
          txt: "中免会员",
        },
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/amount-card.47386af7.png",
          txt: "额度查询",
        },
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/icon-offline-card.497a5c9d.png",
          txt: "购买人信息",
        },
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/swap-card.141beb6b.png",
          txt: "离鸟信息",
        },
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/merchant-icon.1866f085.png",
          txt: "商户资质",
        },
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/position-card.0185ff92.png",
          txt: "提货人信息",
        },
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/transport-card.2a71d34c.png",
          txt: "购买须知",
        },
        {
          src: "https://m.cdfgsanya.com/wap/resources/images/icons/alert-card.51c74ffd.png",
          txt: "帮助中心",
        },
      ],
    };
  },
  components: {},
};
</script>

<style scoped>
.wd {
  width: 375px;
  height: 700px;
  background: url(https://m.cdfgsanya.com/wap/resources/images/user-bg@2x.9c893f04.png)
    no-repeat 0 0;
  background-size: 100% auto;
  background-color: #efeff5;
  background-position-y: -20px;
}
.wd .top {
  width: 375px;
  height: 155px;
}
.wd .top .one {
  position: relative;
}
.wd .top .one img {
  width: 60px;
  height: 60px;
  margin: 30px 13px 22px 15px;
  border-radius: 50%;
}
.wd .top .one span {
  position: absolute;
  left: 90px;
  top: 45px;
  font-size: 14px;
}
.wd .top .two {
  display: flex;
  height: 40px;
}
.wd .top .two div {
  width: 33%;
  text-align: center;
  border-right: 1px dashed #777;
}
.wd .top .two div p {
  font-size: 12px;
  color: #666;
}
.wd .top .two div:last-child {
  border-right: none;
}
.wd .xs {
  display: flex;
  width: 335px;
  height: 40px;
  margin: 10px 20px 0px 20px;
}
.wd .xs .left {
  width: 166px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px 10px 0px 0px;
  margin-left: 2px;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}
.wd .xs .right {
  width: 166px;
  height: 40px;
  background-color: #efeff5;
  border-radius: 10px 10px 0px 0px;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
}

.five {
  display: flex;
  width: 335px;
  height: 82px;
  margin: 0px 20px 0 20px;
  background-color: #fff;
  border-radius: 0px 0px 10px 10px;
}
.five div {
  width: 25%;
  text-align: center;
}
.five div img {
  margin-top: 20px;
  width: 22px;
  height: 22px;
}
.five div p {
  font-size: 12px;
}

.ten {
  width: 335px;
  height: 166px;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 10px;
  margin: 20px 20px 0 20px;
}
.ten div {
  width: 25%;
  height: 50%;
  /* background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ten div img {
  width: 28px;
  height: 28px;
}
.ten div p {
  font-size: 12px;
}
h2 {
  color: red;
  text-align: center;
  font-size: 26px;
}
</style>